<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <!-- <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script> -->
    <title>Document</title>
  </head>
  <body>
    <div id="app">fdsaf{{message}}fdsaf</div>
    <script>
      // Object.defineProperty :1.定义一个对象  2.修改一个对象；
      // VUE
      // let obj = {
      //     name:"张三",
      //     age:20
      // }

      //   var vm =   new Vue({
      //         el:"#app",
      //         data:{
      //             message:"hello"
      //         }
      //     })
      //     setTimeout(() => {
      //     vm.message  = "你好";
      //     }, 2000);

      // 1.设置对象，定义一个对象

      // let obj2 = {
      //     name:"张三"
      // }
      // console.log(obj2)

      // let obj = Object.defineProperty({},"name",{
      //     configurable:true,   //默认是false
      //     enumerable:true,  //可枚举
      //     get(){
      //         console.log("get");
      //         return "张三";
      //     },
      //     set(newValue){
      //         console.log("set:",newValue);
      //     }
      // })

      // console.log(obj);
      // delete obj['name'];

      // console.log(obj);
      // console.log( obj.name);
      // obj.name = "李四"

      // for(let key in obj){
      //     console.log(key);
      // }

      // 渲染案例
      // 初次渲染

      // 获取id为app的div 元素
      let appEle = document.querySelector("#app");
      var childNodes = appEle.childNodes; // 获取app元素底下的所有子节点
      // console.log(childNodes)
      var textContent = childNodes[0].textContent; // 获取了 子节点底下的 文本节点
      var reg = /{{(\w+)}}/g; // 匹配 {{}} 里的内容
      let key;
      if (reg.test(textContent)) {
        key = RegExp.$1; // 获取匹配到 {{}}里的值 -----》message
      }
      // 定义了一个数据； let data = {message:"hello"}
      let data = Object.defineProperty({}, "message", {
        configurable: true, //默认是false
        enumerable: true, //可枚举
        get() {
          console.log("get");
          return "hello";
        },
        set(newValue) {
          // 在2秒之后执行的；
          // 二次渲染；
          console.log("set:", newValue); // newValue=====>你好
          let oldValue = data[key]; // data===>{message:"hello"} --->data['message']--->hello
          let reg = new RegExp(oldValue); //  reg= /hello/;
          // childNodes[0].textContent就是fdsafhellofdsaf
          // var res=  “fdsafhellofdsaf”.replace(/hello/,"你好")； “fdsaf你好fdsaf”
          // “fdsaf你好fdsaf” 赋值给 childNodes[0].textContent
          childNodes[0].textContent = childNodes[0].textContent.replace(
            reg,
            newValue
          );
        },
      });

      // 获取文本节点  把文本节点里的 {{message}}的内容 替换成  data[key] --->data={message:"hello"} key-->message
      // data[key]=== data['message'] --->hello
      // textContet = "fdsaf{{message}}fdsaf"
      childNodes[0].textContent = textContent.replace(reg, data[key]);
      // 文本变成了 fdsaf{{message}}fdsaf ---->fdsafhellofdsaf

      // let data = {message:"hello"}  ---->data = {mesage:"你好",age:20,obj:{}}

      setTimeout(() => {
        data.message = "你好"; // 设置 data里的message值---->触发 set方法；
        console.log("修改了值");
      }, 2000);
    </script>
  </body>
</html>
